
import { Upload, Button, Icon, Modal, Card } from 'antd';
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './Pic4Qr.less'


export default class LwjPic4Absolute extends Component {

  state = {
    fileList: [],
    previewVisible: false,
    previewVisibleUrl: ''
  };


  handleCancel = () => this.setState({ previewVisible: false })
  componentDidMount() {

  }
  componentWillUnmount() {
    this.setState({ previewVisible: false });
  }

  render() {
    const { value } = this.props;
    const { previewVisible } = this.state;
    const QRCode = require('qrcode.react');

    const gridStyle = {
      width: '100%',
      textAlign: 'center'
    };
    const toDetail = () => {
      this.setState({ previewVisible: true })
    }
    const getIMGlist = (fileList) => {
      return (
        <a style={gridStyle} key="key">
          <QRCode onClick={toDetail} style={{ height: "100%", width: "50%", position: "absolute", top: 0, left: 25 }} size={30} value={value} />
          <div className='LwjSowPicList_showPic_preview'>
            <Icon
              type="eye-o"
              style={{
                fontSize: 30,
                color: '#fff'
              }}
              onClick={toDetail}
            />
          </div>
        </a>
      )
    }
    return (
      <Card width={30}>
        {getIMGlist()}
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel} width={348}>
        <QRCode size={300} value={value} />
        </Modal>
      </Card>
    );
  }
}

LwjPic4Absolute.props = {
  value: PropTypes.string,
}
